<!--
*@Author: zt
*@Description: 文档管理
*@Date: 2024-08-22
-->
<template>
  <a-layout>
    <a-layout-header
      class="f-h-auto"
      style="background-color: unset; padding: 0 20px"
    >
      <a-row justify="space-between" align="middle">
        <a-row :gutter="16">
          <a-col>
            <u-icon-button size="large" itype="add" @click="addFolderName">
              新建文件夹
            </u-icon-button>
          </a-col>
          <a-col>
            <u-icon-button size="large" itype="eidt" @click="addFolder(2)">
              修改
            </u-icon-button>
          </a-col>
        </a-row>
        <a-space size="middle">
          <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">
            全选
          </a-checkbox>
          <span>已选中 {{ docChecked.length }} 项</span>
          <DeleteOutlined
            style="color: #aaa; cursor: pointer"
            @click="deleteDoc"
          />
        </a-space>
      </a-row>
    </a-layout-header>
    <a-layout-content class="f-padding-rl16">
      <a-checkbox-group v-model:value="docChecked" style="width: 100%">
        <a-list
          :grid="{ gutter: [16, 16], xs: 2, sm: 3, lg: 4, xl: 7, xxl: 7 }"
          :data-source="docList"
          class="f-w-100"
        >
          <template #renderItem="{ item }">
            <a-list-item
              class="f-w-100"
              style="padding: 0; margin-block-end: 0"
            >
              <u-card>
                <a-row justify="center">
                  <a-space direction="vertical" align="center">
                    <div style="padding: 20px 20px 0" @click="onClickDoc(item)">
                      <a-image
                        :width="80"
                        :preview="false"
                        :src="urlFile('folder/folder.png')"
                      />
                    </div>
                    <template v-if="dbClickValue == item.value">
                      <a-input
                        v-model:value="item.name"
                        @pressEnter="dbClickValue = ''"
                      >
                        <template #suffix>
                          <CheckCircleOutlined @click="dbClickValue = ''" />
                        </template>
                      </a-input>
                    </template>
                    <template v-else>
                      <a-input
                        :style="'text-align:center'"
                        v-model:value="item.foldername"
                        :bordered="showReadonly == item.keyid ? true : false"
                        :readonly="showReadonly == item.keyid ? false : true"
                        @pressEnter="sureFolderName(item, item.foldername)"
                        @focus="
                          sureFolderName(item, item.foldername),
                            (showReadonly = '')
                        "
                        @click.stop="onClickDocName(item, item.foldername)"
                      />
                    </template>
                  </a-space>
                </a-row>
                <a-row justify="space-between">
                  <a-checkbox :value="item.keyid"></a-checkbox>
                  <EllipsisOutlined :rotate="90" />
                </a-row>
              </u-card>
            </a-list-item>
          </template>
        </a-list>
      </a-checkbox-group>
    </a-layout-content>
  </a-layout>
  <Detial
    v-model:open="showDetial"
    :keyid="detialId"
    :id="currentid"
    :title="dailogTitle"
  />

  <AddFolder
    v-model:open="showAddFolder"
    :keyid="updateKey"
    :foldername="foldername"
    :title="addFolderTitle"
    @success="getDirection(), (showAddFolder = false)"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { FolderAddOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash';
import { alertC, urlFile } from '@/util/common';
import Detial from './Detial.vue';
import AddFolder from './AddFolder.vue';
import * as docApi from '@/service/assist/doc';

let docList = ref<any[]>([]);
const dbClickValue = ref<string>('');
const docChecked = ref([]);
const checkAll = ref<boolean>(false);

let showDetial = ref<boolean>(false);
let showAddFolder = ref<boolean>(false);
let addFolderTitle = ref('新增文件夹');
let foldername = ref('');
let currentid = ref<string>('');
let dailogTitle = ref<string>('');
const detialId = ref<any>('');
let updateKey = ref('');

// 全选
const onCheckAllChange = (e: any) => {
  docChecked.value =
    checkAll.value == true ? docList.value.map(item => item.keyid) : [];
};

// 删除选中
const deleteDoc = async () => {
  if (docChecked.value.length > 0) {
    await docApi.del({ ids: docChecked.value.join(',') }).then(res => {
      if (res.code == 0) {
        getDirection();
        docChecked.value = [];
        alertC(res.msg, 'success');
      } else {
      }
    });
  } else {
    alertC('请至少选择一个文件夹', 'warning');
  }
};

const onClickDoc = (item: any) => {
  currentid.value = item.foldername;
  dailogTitle.value = item.foldername;
  detialId.value = item.keyid;
  showDetial.value = true;
};
// 新建文件夹
const addFolder = (type?: number) => {
  if (type != 2) {
    addFolderTitle.value = '新增文件夹';
  } else {
    if (docChecked.value.length != 1) {
      alertC('请选择一个文件夹进行修改', 'warning');
      return;
    } else {
      updateKey.value = docChecked.value[0];
      docList.value.map(e => {
        if (e.keyid == updateKey.value) {
          foldername.value = e.foldername;
        }
      });

      addFolderTitle.value = '文件夹编辑';
      showAddFolder.value = true;
    }
  }
  showAddFolder.value = true;
};

// 新建文件夹
const addFolderName = async () => {
  const res = await docApi.add({ foldername: '新建文件夹', orderno: 1 });
  if (res.code == 0) {
    getDirection();
  }
};

let showReadonly = ref('');
// 修改名字输入框放开
const onClickDocName = (item, itemName) => {
  showReadonly.value = item.keyid;
};
// 修改名字
const sureFolderName = async (item, itemName) => {
  const res = await docApi.update({
    foldername: itemName,
    orderno: 1,
    keyid: item.keyid,
  });
  if (res.code != 0) {
    alertC(res.message, 'warning');
  }
  showReadonly.value = '';
};

onMounted(() => {
  getDirection();
});

const getDirection = () => {
  docApi.page({ size: 10000, current: 1, model: {} }).then(res => {
    if (res.code == 0) {
      docList.value = res.data.records;
    }
  });
};
</script>

<style lang="scss" scoped></style>
